<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>OA系统 - 工作台</title>
    <link rel="stylesheet" href="css/mobile.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="phone-container">
        <div class="phone-screen">
            <div class="notch"></div>
            <div class="app-container">
                <!-- 顶部状态栏 -->
                <div class="status-bar">
                    <span>9:41</span>
                    <span>工作台</span>
                    <div>
                        <i class="fas fa-signal"></i>
                        <i class="fas fa-wifi"></i>
                        <i class="fas fa-battery-full"></i>
                    </div>
                </div>
                
                <!-- 内容区域 -->
                <div class="content">
                    <!-- 工作台头部 -->
                    <div class="work-header">
                        <div class="search-bar">
                            <i class="fas fa-search search-icon"></i>
                            <input type="text" placeholder="搜索任务、项目或客户" style="border: none; background: transparent; outline: none; flex: 1;">
                        </div>
                        
                        <div class="task-filters">
                            <div class="filter-item active" onclick="switchFilter(this, 'all')">全部</div>
                            <div class="filter-item" onclick="switchFilter(this, 'today')">今日待办</div>
                            <div class="filter-item" onclick="switchFilter(this, 'urgent')">紧急</div>
                            <div class="filter-item" onclick="switchFilter(this, 'project')">项目</div>
                            <div class="filter-item" onclick="switchFilter(this, 'customer')">客户</div>
                        </div>
                    </div>
                    
                    <!-- 任务列表 -->
                    <div class="task-list">
                        <div class="task-card">
                            <div class="task-title">完成产品需求文档V2.0</div>
                            <div class="task-meta">
                                <span><i class="fas fa-calendar"></i> 截止：今天 18:00</span>
                                <span><i class="fas fa-flag"></i> 高优先级</span>
                            </div>
                            <div class="task-tags">
                                <span class="task-tag tag-urgent">紧急</span>
                                <span class="task-tag tag-important">重要</span>
                            </div>
                        </div>
                        
                        <div class="task-card">
                            <div class="task-title">客户需求评审会议</div>
                            <div class="task-meta">
                                <span><i class="fas fa-calendar"></i> 14:00 - 15:30</span>
                                <span><i class="fas fa-map-marker-alt"></i> 线上会议</span>
                            </div>
                            <div class="task-tags">
                                <span class="task-tag tag-normal">会议</span>
                            </div>
                        </div>
                        
                        <div class="task-card">
                            <div class="task-title">跟进ABC公司项目进度</div>
                            <div class="task-meta">
                                <span><i class="fas fa-building"></i> ABC公司</span>
                                <span><i class="fas fa-user"></i> 李经理</span>
                            </div>
                            <div class="task-tags">
                                <span class="task-tag tag-important">客户跟进</span>
                            </div>
                        </div>
                        
                        <div class="task-card">
                            <div class="task-title">Q4季度销售数据分析</div>
                            <div class="task-meta">
                                <span><i class="fas fa-calendar"></i> 截止：明天 12:00</span>
                                <span><i class="fas fa-chart-bar"></i> 数据分析</span>
                            </div>
                            <div class="task-tags">
                                <span class="task-tag tag-normal">报告</span>
                            </div>
                        </div>
                        
                        <div class="task-card">
                            <div class="task-title">新产品发布会策划</div>
                            <div class="task-meta">
                                <span><i class="fas fa-calendar"></i> 截止：本周五</span>
                                <span><i class="fas fa-users"></i> 市场部协作</span>
                            </div>
                            <div class="task-tags">
                                <span class="task-tag tag-important">重要</span>
                            </div>
                        </div>
                        
                        <div class="task-card">
                            <div class="task-title">系统BUG修复：登录模块</div>
                            <div class="task-meta">
                                <span><i class="fas fa-calendar"></i> 截止：今天 17:00</span>
                                <span><i class="fas fa-code"></i> 技术部</span>
                            </div>
                            <div class="task-tags">
                                <span class="task-tag tag-urgent">紧急</span>
                                <span class="task-tag tag-normal">技术</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 底部导航栏 -->
                <div class="tab-bar">
                    <div class="tab-item" onclick="window.location.href='index.html'">
                        <div class="tab-icon" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"%23999\"><path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"/></svg>');"></div>
                        <div>首页</div>
                    </div>
                    <div class="tab-item active">
                        <div class="tab-icon" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"%2307c160\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>');"></div>
                        <div>工作台</div>
                    </div>
                    <div class="tab-item" onclick="window.location.href='profile.html'">
                        <div class="tab-icon" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"%23999\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"/></svg>');"></div>
                        <div>我的</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/mobile.js"></script>
    <script>
        // 切换筛选器
        function switchFilter(element, type) {
            // 移除所有活动状态
            const filterItems = document.querySelectorAll('.filter-item');
            filterItems.forEach(item => {
                item.classList.remove('active');
            });
            
            // 添加当前活动状态
            element.classList.add('active');
            
            // 这里可以根据类型加载不同的任务
            console.log('切换到筛选器：', type);
            showToast(`已切换到：${element.textContent}`);
        }
        
        // 模拟时间更新
        function updateTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const timeElement = document.querySelector('.status-bar span');
            if (timeElement) {
                timeElement.textContent = `${hours}:${minutes}`;
            }
        }
        
        updateTime();
        setInterval(updateTime, 60000); // 每分钟更新一次时间
        
        // 任务卡片点击事件
        document.querySelectorAll('.task-card').forEach(card => {
            card.addEventListener('click', function() {
                const title = this.querySelector('.task-title').textContent;
                showToast(`查看任务：${title}`);
            });
        });
    </script>
</body>
</html>